import React from 'react'
import { Table, Pagination, Popover } from 'antd'
import '../batchRecord/search.css'
import styles from '@/components/batchRecord/table.scss'
import util from '@/utils'
// import tableStyles from './table.scss'
import colors from '@/constants/colors'

const { Column } = Table

const SendRecordTable = (props) => {
  const { pageNum, pageSize, total, loading, data, rechargeTypeEnum, onChangePagination } = props

  return (
    <div>
      <Table dataSource={data} pagination={false} loading={loading} rowKey={({id}) => id} >
        <Column title="充值单号" dataIndex="orderNum" align="center" width={120} />
        <Column title="类型" dataIndex="type" render={(value) => (util.getEnumDesc(rechargeTypeEnum, value))} align="center" width={90}/>
        <Column title="条数" dataIndex="smsNum" align="center" width={120} render={(props, row) => {
          if(Number(row.afterNum) > Number(row.beforeNum)){ 
            // 加条数
            return <span style={{color: colors.rechargePlus}}>{`+${props}`}</span>
          }else if(Number(row.afterNum) < Number(row.beforeNum)){
            // 减条数
            return <span style={{color: colors.rechargeMin}}>{`-${props}`}</span>
          }
          return props
        }}/>
        <Column title="交易前条数" dataIndex="beforeNum" align="center" width={120}/>
        <Column title="交易后条数" dataIndex="afterNum" align="center" width={120}/>
        <Column title="描述" width={200} dataIndex="description" align="center" render={(props) => (
          <Popover content={props} trigger="click">
            <div className="single-line">
              {props}
            </div>
          </Popover>
        )}/>
        <Column title="交易时间" dataIndex="createTime" align="center" width={90}/>
      </Table>
      {!!total && <div className={styles["pagination-container"]}>
        <Pagination 
          className={styles["pagination"]} 
          showQuickJumper 
          showTotal={(total, range) => `共${total}条`} 
          pageSize={pageSize} 
          current={pageNum}
          total={total} 
          onChange={onChangePagination} 
        />
      </div>
      }
    </div>
  )
}

export default SendRecordTable